import React from 'react'
import {withRouter,} from 'react-router-dom'
import moment from "moment";
import MarkIcon from '../../../../res/images/web/game/shoucang@2x.png'
import MarkedIcon from '../../../../res/images/web/game/shoucang_selected@2x.png'
import LocalStorageService from "../../../../utils/LocalStorageService";
import {behaviorReq} from "../../../../apis/goApis";

const BasketballGameCard = props => {
    const game = props.game
    const markedList = props.markedList
    game.home = {
        name: game.Zhuname,
        score: [game.Zhufen1, game.Zhufen2, game.Zhufen3, game.Zhufen4, game.Zhufen5,],
        logo: game.Zhulogo,
    }
    game.away = {
        name: game.Kename,
        score: [game.Kefen1, game.Kefen2, game.Kefen3, game.Kefen4, game.Kefen5,],
        logo: game.Kelogo,
    }
    const start = game.State !== '未开赛' && game.State !== '已完赛'
    const finished = game.State === '已完赛'
    const unStart = game.State === '未开赛'
    const marked = markedList.find(marked => marked.Id === game.Id)
    const textStyle = {
        fontSize: '14px',
        lineHeight: '18px',
        color: '#333',
    }
    const renderTeam = (team) => {

        return <div className='flex-space-between-align-center mg-t-12px'>
            <div className='flex-align-center'>
                {/*<img referrer="no-referrer" src={team.logo} style={{width: 24, height: 24, marginRight: '8px',}} alt=''/>*/}
                <span className='no-break' style={textStyle}>{team.name}</span>
            </div>
            <div className='flex-align-center'>
                <div className='flex' style={{justifyContent: 'flex-end'}}>
                    {team.score.map((s, i) => <span key={i} style={{marginLeft: '12px', color: 'rgba(33, 58, 75, 0.5)', width: 16,}}>{start || finished ? s : ''}</span>)}
                </div>
                <span className='flex-1' style={{textAlign: 'right', width: 16, ...textStyle}}>{start || finished ? team.score.reduce((a, b) => a + b, 0) : ''}</span>
            </div>
        </div>
    }
    const liveIcon = <div className='game-football-game-item-header-info game-football-game-item-header-info-live'>
        <span className='game-football-game-item-header-info-span'>视频</span>
    </div>
    const followIcon = <img src={marked ? MarkedIcon : MarkIcon} style={{width: 16, height: 16,}} alt=''/>

    return <div
        style={{
            padding: '8px 16px',
            marginBottom: '4px',
            width: '100%',
            background: '#fff',
        }}
        onClick={() => {
            const isLogin = LocalStorageService.get('userid')
            if (isLogin) {
                behaviorReq({
                    userid: LocalStorageService.get('userid'),
                    handle: '点击篮球比赛',
                })
            }
            props.history.push(`./basketball/${game.Id}`)
        }}
    >
        <div className='flex-space-between-align-center'>
            <span className='gray-text flex-1'>
                {game.Name} {moment(game.Startt * 1000).format('HH:mm')}
            </span>
            <span
                className='flex-1'
                style={{
                    color: start ? '#FFA500' : '#213A4B',
                    textAlign: 'center',
                }}
            >{game.State}</span>
            <div className='flex flex-1' style={{textAlign: 'right', justifyContent: 'flex-end'}}>
                {game.Zhibo && start ? liveIcon : null}
                {finished ? null : followIcon}
            </div>
        </div>

        <div>
            {renderTeam(game.home)}
            {renderTeam(game.away)}
        </div>
    </div>
}

export default withRouter(BasketballGameCard)